<template>
    <div class="botton" @click="showVideo">
        <img src="../../assets/class/视频.png">
    </div>
    <div class="sideBar" v-if="show">
        <div class="video">
            <img src="../../assets/头像.png">
            <span>{{ userData.username }}</span>
        </div>
    </div>
</template>

<script setup>
import store from "@/store";
import { ref } from "vue";

const show = ref(false)
const userData = ref(store.state.userData)
function showVideo() {
    show.value = !show.value
}
</script>

<style scoped>
.botton {
    background-color: white;
    box-shadow: 0px 2px 3px gray;
    height: 3.125rem;
    width: 3.125rem;
    border-radius: 100%;
    position: absolute;
    left: 1rem;
    top: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
}

.botton img {
    height: 2.15rem;
    width: 2.15rem;
}

.sideBar {
    width: 12.25rem;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.video {
    background-color: #E0E0E0;
    height: 5.625rem;
    width: 10rem;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    border: 2px black solid;
}

.video img {
    height: 50px;
    width: 50px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video span{
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}
</style>